<!--交易记录-->

<template>
	<div class="setpwd">
		<div class="my_header">
			<i class="mui-icon mui-icon-arrowleft" aria-hidden="true" @click="$router.back(-1)"></i>
			<div class="top1">{{title}}</div>

		</div>
		<div class="jyrecord">

			<div class="row">
				<div class="left">手机号</div>
				<div class="right"><input type="text" v-model="mobile" placeholder="请输入手机号"></div>
			</div>
			<div class="row yzm">
				<div class="left">验证码</div>
				<div class="right"><input type="text" v-model="code" placeholder="请输入验证码"></div>
				<span class="hqyzm" v-show="show" @click="editegetyzm">获取验证码</span>
				<span class="hqyzm" v-show="!show">{{count}}</span>
			</div>
			<div class="row">
				<div class="left">登录密码</div>
				<div class="right"><input type="password" v-model="newpassword" placeholder="请输入您的密码"></div>
			</div>
			<div class="row jyje">
				<div class="left">确认密码</div>
				<div class="right"><input type="password" v-model="repassword" placeholder="请再次输入您的密码"></div>
			</div>

		</div>

		<van-button size="large" class="submit" @click="editepwd">保 存</van-button>
	</div>

</template>

<script>
	export default {
		data() {
			return {
				//查询动态
//				password: '未设置',
//				is_mobile: '未绑定',
//				is_qq: '未绑定',
//				is_weixin: '未绑定',
//				paypwdstate: '已设置',
				title:'',
				show: true,
				count: '',
				timer: null,
				paypassword: '',
				mobile: '',
				code: '',
				newpassword: '',
				repassword: '',
				wxVisible: false

			}
		},
		created: function() {
			var status=this.$route.query.pwd
			if(status == '已设置') {
				this.title='修改登录密码'
			}else if(status=='未设置'){
				this.title = '设置登录密码'
			}
			console.log(status)
		},
		methods: {

			//获取验证码
			editegetyzm: function() {
				var that = this;

				if(that.mobile == "") {

					that.$toast({
						message: "手机号码不能为空",
					})
				} else if(that.mobile != "") {
					var reg = /^1[3456789]\d{9}$/;
					if(!reg.test(that.mobile)) {

						that.$toast({
							message: "请输入有效的手机号码",
						})
					} else {

						const TIME_COUNT = 60;
						if(!that.timer) {
							that.count = TIME_COUNT;
							that.show = false;
							that.timer = setInterval(() => {
								if(that.count > 0 && that.count <= TIME_COUNT) {
									that.count--;
								} else {
									that.show = true;
									clearInterval(that.timer);
									that.timer = null;
								}
							}, 1000)
						};

						that.$options.methods.sendyzm(that.mobile);

					}

				}
			},
			//发送短信验证码
			sendyzm: function(mobile) {
				var that = this;
				console.log(mobile);
				$.ajax({
					type: "post",
					url: "http://zcapi.hrgsxt.cn/api/Login/send_sms",
					data: {
						mobile: mobile
					},
					cache: false,
					dataType: "json",
					success: function(data) {

						that.$toast({
							message: "发送成功",
						})

					}
				});
			},

			// 保存登录密码
			editepwd: function() {
				var that = this;
				if(that.mobile == "") {
					that.$toast({
						message: "请输入的手机号码",
					})

				} else if(that.code == "") {

					that.$toast({
						message: "请输入验证码",
					})
				} else if(that.newpassword == "") {

					that.$toast({
						message: "请输入新密码",
					})
				} else if(that.repassword == "") {

					that.$toast({
						message: "请再次输入新密码",
					})
				} else if(that.newpassword != that.repassword) {

					that.$toast({
						message: "两次输入的密码不一致",
					})
				} else {

					$.ajax({
						type: "post",
						url: "http://www.hrgsxt.cn/api/User_safe/password",   //修改登录密码
						data: {
							token: localStorage.getItem("token"),
							mobile: that.mobile,
							code: that.code,
							password: that.newpassword

						},
						cache: false,
						dataType: "json",
						success: function(data) {
							if(data.code == 200) {
								that.$toast({
									message: data.message,
								});
                that.$router.go(-1);

                //              setTimeout(function(){
                //              	  that.$router.push({
                // path: '/accountsecury'
                // });
                //              },1500);
								
							} else {

								that.$toast({
									message: data.message,
								});
								  setTimeout(function(){
                               	  that.$router.push({
									path: '/accountsecury'
								  });
                               },1500);
							}

						}
					});
				}

			}

		},
		components: {

		}
	}
</script>

<style scoped>
	.setpwd .yzm .hqyzm {
		display: block;
		float: right;
		width: 25%;
		text-align: center;
		height: 0.58rem;
		background-color: #E2E2E2;
		margin-top: 0.15rem;
		line-height: 0.58rem;
		font-size: 0.24rem;
		color: #0085F0;
		border-radius: 8px;
	}
	/*头部*/
	
	.my_header {
		height: .88rem;
		background: rgba(0, 133, 240, 1);
		text-align: center;
		color: #fff;
		line-height: .88rem;
		position: relative;
		padding: 0 .3rem;
	}
	
	.my_header i {
		font-size: .4rem;
		float: left;
		line-height: .88rem;
	}
	
	.my_header .top1 {
		width: 40%;
		margin-left: 25%;
		float: left;
		text-align: center;
		letter-spacing: 2px;
	}
	
	.txlist .row .right input {
		border: none;
		outline: none;
		text-indent: 4em;
		text-align: right;
		padding-right: 0px !important;
	}
	/*查询记录*/
	
	.jyrecord {
		margin-top: 0px !important;
		width: 100%;
		font-size: 0.26rem !important;
		background-color: #FFFFFF;
	}
	
	.jyrecord .row {
		width: 100%;
		height: 0.88rem;
		background-color: #FFFFFF;
		line-height: 0.88rem;
		padding: 0px 0.3rem 0px 0.3rem;
		border-bottom: 1px solid #efefef;
	}
	/*.jyrecord .row:first-child {
		border-bottom: 1px solid #efefef;
	}*/
	
	.jyrecord .row .left {
		width: 25%;
		float: left;
		font-size: 0.3rem;
		color: #333333;
	}
	
	.jyrecord .row .right {
		color: #999999;
		width: 50%;
		float: left;
		font-size: 0.28rem;
		text-align: left;
	}
	
	.jyrecord .row .right img {
		width: 0.14rem;
		height: 0.24rem;
		vertical-align: middle;
		margin-left: 7px;
		margin-bottom: 3px;
	}
	
	.setpwd .row .right input {
		border: none;
		outline: none;
		line-height: 0.88rem;
		text-align: left;
		padding: 0px !important;
		margin-bottom: 0px !important;
	}
	
	.setpwd .submit {
		background-color: #0085F0;
		font-size: 0.34rem;
		color: #FFFFFF;
		width: 92%;
		margin-left: 4%;
		margin-top: 5%;
		height: 0.88rem;
		line-height: 0.88rem;
		border-radius: 12px;
	}
</style>
